<template>
    <article class="article-list">
        <template v-if="articleList.length">
            <article v-for="item in articleList" :key="item['id']" @click="toArticleFn(item['id'])">
                <h3>{{ item['title'] }}</h3>
                <div class="article-widget">
                    <time>{{ item['update_time'].split('T')[0] }}</time>
                    <!-- <span>Vue</span>
                    <span>前端</span>-->
                </div>
            </article>
        </template>
        <div v-else class="none-content">这里什么也没有！</div>
    </article>
</template>

<script>
import articleListFn from '@/use/home/articleList'
import { useRouter } from 'vue-router'

export default {
    name: '',
    setup() {
        const router = useRouter()

        const { articleList, toArticleFn } = articleListFn(router)


        return {
            articleList,
            toArticleFn,
        }
    },
}
</script>

<style scoped>
.article-list {
    flex: 1;
    padding: 20px;
    padding-right: 40px;
}
.article-list > article {
    margin-bottom: 40px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
}
.article-list h3 {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #555;
}
.article-widget > time {
    margin-right: 20px;
}
.article-widget > time:hover {
    cursor: help;
}
.article-widget > span {
    margin: 0 5px;
    text-decoration: underline;
}

.none-content {
    font-size: 22px;
    color: #222;
}
</style>
